Islands Architecture

静的なHTMLの海に、インタラクティブな「島(Island)」を点在させるWebアーキテクチャパターン。Astroが普及させた。

基本思想

ページ全体をJavaScriptで制御するSPAとは異なり、「静的でよい部分」と「インタラクティブにすべき部分」を明示的に分離する。

[静的HTML] [静的HTML] [インタラクティブ島] [静的HTML] [インタラクティブ島]

インタラクティブな島の部分だけにJavaScriptを送信・実行することで、デフォルトではゼロJSに近い状態を実現する。

部分的ハイドレーションとの関係

Islands Architectureは部分的ハイドレーションの一形態として理解できる。SSRで生成されたHTMLに対して、インタラクティブが必要なコンポーネントだけをハイドレートする。

トレードオフ

「ウェブ標準ファースト」との関係

Astroのゼロデフォルトとislands architectureは、ブラウザが標準でサポートする機能を最大限に活用し、JavaScriptを最小化する「ウェブ標準ファースト」という哲学の具体的実装の一つ。

関連